oa.view.rf.additionWithAnimatedDice = {
/**
 * Render the structure of an additionWithAnimatedDice problem
 * 
 * @author Gerd Wagner, Maria Hentzschel, Marcus Uhlig
 * @param {ArithmeticProblem} ap  An arithmetic problem.
 * @requires Eventhandlers from renderIndividualEquation.js
 */
render: function (ap) {  
  var el = {};
  var rB = document.getElementById("renderBox");
  var mainEl = dom.createDiv("additionWithAnimatedDice");
  mainEl.setAttribute("data-nmrofops", ap.type.operators.length);
  rB.appendChild( mainEl);
  // first die (operand 1)
  el = dom.createSpan("operand1","operand");
  mainEl.appendChild( el);
  // further dice/operands
  for (var i=2; i <= ap.operands.length; i++) {
    // operator
    el = dom.createSpan("operator"+(i-1),"operator");
    mainEl.appendChild( el);
    el.innerHTML = oa.view.operatorSymbols[ ap.type.operators[i-2]-1];
    // operand 
    el = dom.createSpan("operand"+i,"operand");
    mainEl.appendChild( el);
  }
  // equality symbol
  el = dom.createSpan("","equalitySymbol","=");
  mainEl.appendChild( el);
  // result
  el = dom.createNumInput("askedFor","askedFor","result");
  mainEl.appendChild( el);
 // configure the input field
  el = document.getElementById("askedFor");
  el.setAttribute("autofocus", "autofocus");
  el.addEventListener("input", oa.view.handleUserInputEvents, false);
  el.focus();
  // configure the submit/continue button
  el = dom.createButton("submitButton","blue","?");
  mainEl.appendChild( el);
  el.addEventListener("click", oa.view.handleClickSubmitButtonEvents, false);
  document.addEventListener("keypress", oa.view.handleKeyPressEvents, true);
},

/**
 * Fill an already rendered problem equation with new values for operands and 
 * result.
 * 
 * @author Maria Hentzschel, Marcus Uhlig
 * @param {ArithmeticProblem} ap  An arithmetic problem.
 */
fill: function (ap) {
  var askedFor = document.getElementById("askedFor"),
      operandEl=null, dieOperand=null;
  askedFor.value = ""; 
  askedFor.focus();
  // fill in all operands
  for (var i=1; i <= ap.operands.length; i++) {
    if (ap.type.askedFor !== i) {
      operandEl = document.getElementById("operand"+i);
      dieOperand = oa.view.rf.createDie( ap.operands[i-1]);
      dieOperand.setAttribute("class", oa.view.rf.getRandomAnimationClass());
      operandEl.innerHTML = "";
      operandEl.appendChild( dieOperand);
    }
  }
  // result
  if (ap.type.askedFor !== 0) {
	  var result = document.getElementById("result");
	  var designedResult = oa.view.rf.createDie(ap.result);
	  designedResult.setAttribute("class", oa.view.rf.getRandomAnimationClass());
	  result.innerHTML = "";
	  result.appendChild(designedResult);
  }
 } 
};
/**
 * Returns a random css animation class.
 * 
 * @author Maria Hentzschel, Marcus Uhlig
 * @return {String} Css animation class.
 */
oa.view.rf.getRandomAnimationClass = function () {
	var x = Math.floor(Math.random() * (5));
	switch(x) {
		case 0:
			return 'fadeIn';
		case 1:
			return 'zoomIn';
		case 2:
			return 'zoomOut';
		case 3:
			return 'fadeVertical';
		case 4:
			return 'fadeHorizontal';
		default:
			return '';
	}
};
/**
 * Creates a die with a random color out of the given operand as an SVG 
 * element. If the given operand is not compatible with a dice - which means
 * it is not 0, 1, 2, 3, 4, 5 or 6 - a simple text node will be created as
 * fallback content.
 * 
 * @author Maria Hentzschel, Marcus Uhlig
 * @param {Integer} operand Operand to create a dice from.
 * @return {Node} SVG node or text node.
 */
oa.view.rf.createDie = function (operand) {
	var svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
	var border = document.createElementNS('http://www.w3.org/2000/svg', 'path');

	svgElem.setAttribute('viewBox', "0 0 200 200");
	svgElem.setAttribute('height', "120");
	svgElem.setAttribute('width', "120");
	svgElem.setAttribute('version', "1.1");
	border.setAttribute('d', "M 30 15 L 170 15 L 172 15.5 L 174 16.5 " + 
			"L 176 18 L 178 19.5 L 180 21.5 L 182 24.5 L 184 27.5 " + 
			"L 185 30 L 185 170 L 184 172.5 L 182 175.5 L 180 178.5 " + 
			"L 178 180.5 L 176 182 L 174 183.5 L 172 184.5 L 170 185 " + 
			"L 30 185 L 28 184.5 L 26 183.5 L 24 182 L 22 180.5 " + 
			"L 20 178.5 L 18 175.5 L 16 172.5 L 15 170 L 15 30 " + 
			"L16 27.5 L 18 24.5 L 20 21.5 L 22 19.5 L 24 18 " + 
			"L26 16.5 L 28 15.5 z");

	border.setAttribute('fill', "rgb(" + oa.view.rf.getRandomColorComponent() +
			"," + oa.view.rf.getRandomColorComponent() + "," +
			oa.view.rf.getRandomColorComponent() + ")");
	border.setAttribute('stroke-width', "8");
	border.setAttribute('stroke', "black");
	svgElem.appendChild( border);

	switch (operand) {
		case 0:
			break;
		case 1:
			svgElem.appendChild(oa.view.rf.drawDot(100,100));
			break;
		case 2:
			svgElem.appendChild(oa.view.rf.drawDot(60,60));
			svgElem.appendChild(oa.view.rf.drawDot(140,140));
			break;
		case 3:
			svgElem.appendChild(oa.view.rf.drawDot(50,50));
			svgElem.appendChild(oa.view.rf.drawDot(100,100));
			svgElem.appendChild(oa.view.rf.drawDot(150,150));
			break;
		case 4:
			svgElem.appendChild(oa.view.rf.drawDot(60,60));
			svgElem.appendChild(oa.view.rf.drawDot(140,140));
			svgElem.appendChild(oa.view.rf.drawDot(140,60));
			svgElem.appendChild(oa.view.rf.drawDot(60,140));
			break;
		case 5:
			svgElem.appendChild(oa.view.rf.drawDot(50,50));
			svgElem.appendChild(oa.view.rf.drawDot(100,100));
			svgElem.appendChild(oa.view.rf.drawDot(150,150));
			svgElem.appendChild(oa.view.rf.drawDot(150,50));
			svgElem.appendChild(oa.view.rf.drawDot(50,150));
			break;
		case 6:
			svgElem.appendChild(oa.view.rf.drawDot(55,45));
			svgElem.appendChild(oa.view.rf.drawDot(55,100));
			svgElem.appendChild(oa.view.rf.drawDot(55,155));
			svgElem.appendChild(oa.view.rf.drawDot(145,45));
			svgElem.appendChild(oa.view.rf.drawDot(145,100));
			svgElem.appendChild(oa.view.rf.drawDot(145,155));
			break;
		default:
			return document.createTextNode(operand);
	}
	return svgElem;
};

/**
 * Creates a random color component for the dices.
 * The color component has to be web save and not to dark.
 * 
 * @author Maria Hentzschel, Marcus Uhlig
 * @return {Integer} Random color component.
 */
oa.view.rf.getRandomColorComponent = function() {
	var min = 2;
	var max = 6;
	return Math.floor(Math.random() * 51 * (max - min)) + 51 * min;
};

/**
 * Creates a dot as a SVG circle element.
 * 
 * @author Maria Hentzschel, Marcus Uhlig
 * @param {Integer} x Horizontal position of the center of the dot.
 * @param {Integer} y Vertical position of the center of the dot.
 * @return {Node} SVG circle element.
 */
oa.view.rf.drawDot = function (x,y) {
  var dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  dot.setAttribute('cx', x);
  dot.setAttribute('cy', y);
  dot.setAttribute('r',"20");
  dot.setAttribute('stroke',"black");
  dot.setAttribute('stroke-width',"2");
  dot.setAttribute('fill',"black");
  return dot;
};